<template>
  <div class="app-container">
    <template>
      <el-table
        :data="list"
        height="500"
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="50"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="类别名称"
        >
          <template slot-scope="scope">
            <div v-if="!scope.$index">
              <el-input
                v-model="form.name"
                size="small"
                @keyup.enter="addClk"
                placeholder="请输入内容"
              ></el-input>
            </div>
            <div
              v-else
              @dblclick="dbClk(scope.$index,scope.row.name)"
            >
              <el-input
                @blur="updateEnter(scope.row.id,scope.row.name)"
                v-if="index == scope.$index"
                v-focus
                size="small"
                v-model="input"
                placeholder="请输入修改内容"
              ></el-input>
              <el-button
                v-else
                type="primary"
                size="small"
                plain
              >{{scope.row.name}}</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          width="200"
          label="操作"
        >
          <template slot-scope="scope">
            <div v-if="!scope.$index">
              <el-button
                @click="addClk"
                type="success"
                size="small"
                class="pan-btn green-btn"
              >保存</el-button>
            </div>
            <div v-else>
              <el-button
                @click="updateEnter(scope.row.id,scope.row.name,true)"
                type="warning"
                size="small"
              >修改</el-button>
              <el-button
                type="danger"
                size="small"
                @click="deleteClk(scope.row.id)"
              >删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      form: {
        name: "",
        type: "",
      },
      index: null,
      input: "",
    };
  },
  mounted() {
    this.getClassifyList();
  },
  methods: {
    ...mapActions("classify", [
      "getClassifyList",
      "sendList",
      "updatelist",
      "deleteLists",
    ]),
    ...mapMutations("classify", ["SET_FORM"]),

    // 确认修改
    updateEnter(id, name, isClk) {
      if (!this.input.trim().length || this.input.trim() == name) {
        this.index = null;
        return;
      }

      let isTrue = this.list.find((v) => v.name == this.input);
      if (isTrue && !isClk) {
        this.$message("您输入的类别已存在！请重新输入！");
        this.index = null;
        return;
      }

      let form = { id, name: this.input, type: "" };
      this.SET_FORM(form);
      this.updatelist();

      if (!isClk) {
        this.$message({
          type: "success",
          message: "恭喜你修改成功",
        });
      }
      this.index = null;
    },

    // 删除
    deleteClk(id) {
      // console.log(id);
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteLists(id);
          this.$message({
            type: "success",
            message: "已删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // new -add
    addClk() {
      if (!this.form.name.trim().length) {
        this.index = null;
        return;
      }

      let isTrue = this.list.find((v) => v.name == this.form.name);
      if (isTrue) {
        this.$message("输入的类别已存在！请重新输入！");
        this.form.name = "";
        this.index = null;
        return;
      }

      if (!this.form.name.trim().length) return;

      this.sendList(this.form);
      this.$message({
        type: "success",
        message: "新增成功!",
      });
      this.form.name = "";
    },

    // 双击修改
    dbClk(index, name) {
      this.input = name;
      this.index = index;
    },
  },
  computed: {
    ...mapState("classify", ["list"]),
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.children[0].focus();
      },
    },
  },
};
</script>

<style scoped>
</style>
